<template>
    <div class="guide app-wrapper">
        <div class="guide-main">
            <div class="lm-swipe">
            <router-link class="tag" to="/invitation"><i class="icon icon-share"></i> 邀请卡</router-link>
            <swiper>
    　　            <swiper-slide><img src="http://ceshi.qnggg.com/attachment/images/3/2019/08/bddxWDEm8iH6d426oB6D622sO1mb6w.png" /></swiper-slide>
                </swiper>
            </div>
            <div class="guide-card guide-item">
                <h3 class="guide-card-title">清水河世界</h3>
                <p class="guide-card-desc"><time>2019-07-23</time> | 34人观看</p>
                <p><span class="color-orange">￥1.00</span></p>
            </div>

            <div class="guide-item guide-item-share">
                <p>分享榜</p>
                <p class="text-right" style="display: none;">快来做第一个分享吧<i class="van-icon van-icon-arrow"></i></p>
                <div class="share-rank">
                    <div class="share-rank-item"><img src="http://ceshi.qnggg.com/attachment/images/3/2019/08/bddxWDEm8iH6d426oB6D622sO1mb6w.png" alt=""></div>
                    <div class="share-rank-item"><img src="http://ceshi.qnggg.com/attachment/images/3/2019/08/bddxWDEm8iH6d426oB6D622sO1mb6w.png" alt=""></div>
                    <div class="share-rank-item"><img src="http://ceshi.qnggg.com/attachment/images/3/2019/08/bddxWDEm8iH6d426oB6D622sO1mb6w.png" alt=""></div>
                    <div class="share-rank-item"><img src="http://ceshi.qnggg.com/attachment/images/3/2019/08/bddxWDEm8iH6d426oB6D622sO1mb6w.png" alt=""></div>
                </div>
                <i class="van-icon van-icon-arrow"></i>
            </div> 

            <div class="panel guide-panel guide-item">
                <div class="panel-heading"><h3 class="panel-heading-title">直播介绍</h3></div>
                <div class="panel-body">

                </div>
            </div>

            <div class="panel-live-detail">
                <router-link to="/info" class="meida relative clearfix">
                    <div class="media-object pull-left"><img :src="userinfo.avatar" alt="" class="img-avtar pull-left"></div>
                    <div class="media-body over-hidden">
                        <h3 class="media-heading">{{userinfo.nickname}}</h3>
                    </div>
                    <!-- <button type="button" class="button btn-follow">关注</button> -->
                </router-link>
                <ul class="counts-list text-center">
                    <router-link to="/income" tag="li">
                        <p>538</p>
                        <p>话题数</p>
                    </router-link>
                    <li>
                        <p>5万</p>
                        <p>浏览量</p>
                    </li>
                    <!-- <li>
                        <p>27</p>
                        <p>关注</p>
                    </li> -->
                </ul>
            </div>

            <div class="other-item text-center">
                <p>微赞直播提供技术支持</p>
            </div>
        </div>
        <!-- /guide-main -->
        <div class="bottom-fixed">
            <router-link to="/live/35" class="button-block">进入直播</router-link>
            <!-- <button type="button" class="button-block">进入直播</button> -->
        </div>
        <div class="button-circle-plus" @click="showNavbar = true"></div>

        <van-popup 
            position="bottom"
            overlay="false"
            overlay-class="app-masker"
            get-container=".app-wrapper"
            v-model="showNavbar"
        >
            <NavActionSheet @hideNavBar="hideNavbar"></NavActionSheet>  
        </van-popup>

    </div>
</template>

<script>
import 'swiper/dist/css/swiper.css';
import NavActionSheet from '@/components/NavActionSheet';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import { mapState } from 'vuex';

export default {
    components: {
        swiper,
        swiperSlide,
        NavActionSheet
    },
    props: {},
    data() {
        return {
            showNavbar: false
        };
    },
    computed: {
        ...mapState({
            userinfo: state => state.userinfo
        })
    },
    methods: {
        hideNavbar(){
            this.showNavbar = false;
        }
    },
    created() {},
    mounted() {}
};
</script>
<style lang="scss" scoped>
@import '@/assets/config.scss';
$swipe-height: 350px;
.guide {
    padding-bottom: 120px;
    .guide-main { height: 100%; overflow: auto; }
    .lm-swipe {
        height: $swipe-height;
        overflow: hidden;
        position: relative;
        .tag {
            padding: 0 10px;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 24px;
            color: #fff;
            line-height: 2;
            border-radius: 0 0 0 12px;
            background: linear-gradient(#318bff, #103ee7);
            z-index: 5;
            .icon {
                font-size: 32px;
                vertical-align: middle;
                position: relative;
                top: 2px;
            }
        }

        .swiper-slide img {
            width: 100%;
            height: 350px;
        }

        .swiper-pagination-bullet {
            width: 20px;
            height: 20px;
        }
    }
}

.guide-item {
    display: flex;
    padding: 30px;
    margin-bottom: 24px;
    background: #fff;
}

.guide-card {
    display: block;
    font-size: 24px;;
    .guide-card-title {
        font-size: 36px;
        color: #353535;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .guide-card-desc {
        height: 64px;
        line-height: 64px;
        color: #666;
        time {
            color: #0084ff;
            font-weight: bold;
        }
    }
}

.panel-heading-title {
    font-size: 32px;
    color: #333;
}

.guide-item-share {
    font-size: 28px;
    color: #333;
    > p { flex: 1; }
    .van-icon {
        display: flex;
        align-items: center;
        margin-left: 6px;
        font-size: 36px;
        vertical-align: middle;   
    }

    .share-rank-item {
        display: inline-block;
        width: 48px;
        height: 48px;
        margin-left: 10px;
        vertical-align: middle;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }
    }
}

.panel-live-detail {
  padding-left: 36px;
  margin-bottom: 24px;
  background: #fff;
  .meida {
    display: flex;
    padding: 30px 30px 30px 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
  }

  .media-object{
    width: 72px;
    height: 72px;
    margin-right: 20px;
    border-radius: 100%;
    overflow: hidden;
  }

  .media-heading { font-size: 28px; }

  .media-body {
    display: flex;
    align-items: center;
    line-height: 1.5;
    color: #666;
  }

    .btn-follow {
      display: inline-block;
      width: 130px;
      height: 56px;
      position: absolute;
      top: 50%;
      right: 30px;
      transform: translate3d(0, -50%, 0);
      font-size: 26px;
      line-height: 56px;
      color: #fff;
      background: linear-gradient(#103ee7, #318bff);
      border-radius: 28px;
    }

  .counts-list {
    display: flex;
    padding: 30px 30px 30px 0;
    li {
      flex: 1;
    }
    p:nth-of-type(1){
      font-size: 36px;
      color: #0084ff;
    }

    p:nth-of-type(2){
      font-size: 24px;
      color: #333;
    }
  }
}

.other-item {
    padding: 20px;
    font-size: 24px;
    color: #b0b0b0;
    background: #fff;
}

.bottom-fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 12px 30px;
    background-color: #fff;
    z-index: 15;
    > .button-block {
        display: block;
        width: 100%;
        height: 96px;
        font-size: 32px;
        line-height: 96px;
        text-align: center; 
        color: #fff;
        background: #0084ff; 
        border-radius: 6px;
    }
}

.button-circle-plus {
    position: fixed;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    bottom: 160px;
    right: 35px;
    background: linear-gradient(#103ee7, #318bff);
    transform: rotate(111deg);
    z-index: 5;
    &:after, &:before {
        content: '';
        background: $bg-white;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0) rotate(-111deg);
        border-radius: 2px;
    }

    &:after {
        width: 4px;
        height: 40px;

    }

    &:before {
        width: 40px;
        height: 4px;
    }
}
</style>